<template>
  <q-form @submit="submit" class="dialog-content" style="height: 567px">
      <div class="flex justify-between form-inline margin-t-20" style="padding-bottom:0px">
        <select-tooltip
          v-model="queryParams.category"
          :multiple="false"
          isShowAll
          :options="modelList"
          msg="备件分类"
        />
        <div>
          <select-input
            ref="selectInput"
            :list="searchCondition"
            @search="inputSearch"
            @changeVal="changeVal"
            @clearSearchVal="clearSearchVal"
          />
        </div>
      </div>
      <div
        class="page-content" style="height:460px"
      >
        <q-table
          :data="tableData"
          :columns="columns"
          row-key="id"
          class="myTable scroll"
          style="max-height: 460px"
          :loading="isTableLoading"
          :pagination.sync="pagination"
          :hide-bottom="tableData.length > 0"
          no-data-label="暂无数据"
          loading-label="加载中..."
          selection="multiple"
          :selected.sync="selected"
          color="primary"
        >
        </q-table>
        <yz-pagination v-model="pagination" @onSearch="getList"/>
      </div>
      <q-separator />
      <div class="dialog-footer text-center margin-t-10">
        <q-btn outline label="取消" color="primary" @click="hideDialog" class="q-mr-md"/>
        <q-btn outline label="上一步" color="primary"  @click="
               $emit('close');
        reset() " class="q-mr-md"/>
        <q-btn
          unelevated
          label="确认"
          v-throttle
          class="btn"
          @click="submit"
          color="primary"
          type="submit"
        />
    </div>
  </q-form>
</template>

<script>
import _ from 'lodash'
import SelectInput from 'src/components/select-input'
import { getMapByGroup } from 'src/boot/tool/dictionary'
import { getApplyOrder } from 'src/boot/spare/parts'
export default {
  name: 'part-order',
  props: {
    isMultiple: {
      // 是否复选
      type: Boolean,
      default: true
    },
    maxlength: {
      // 最大条数
      type: Number,
      default: 0
    },
    selData: Array,
    orderType: Number, // 1：维修工单 2：保养工单
    orderId: Number // 维修工单ID或保养工单ID
  },
  components: {
    SelectInput
  },
  data () {
    return {
      searchCondition: [
        { id: 'number', name: '备件编号' },
        { id: 'name', name: '名称' }
      ],
      queryParams: {
        category: 'all',
        searchBy: null,
        keyword: null
      },
      pagination: {
        pageNum: 1, // 当前页码
        pageSize: 15, // 每页条数
        rowsNumber: 0 // 总条数
      },
      tableData: [],
      columns: [
        { name: 'number', label: '备件编号', align: 'left', field: 'number' },
        { name: 'name', label: '备件名称', align: 'left', field: 'name' },
        {
          name: 'categoryName',
          label: '所属分类',
          align: 'left',
          field: 'categoryName'
        },
        { name: 'spec', label: '规格', align: 'left', field: 'spec' },
        { name: 'unitName', label: '单位', align: 'left', field: 'unitName' }
      ],
      isTableLoading: false,
      selected: [],
      modelList: []
    }
  },
  computed: {},
  watch: {
    queryParams: {
      handler () {
        this.getList()
        this.selected = []
      },
      deep: true
    },
    orderId (val) {
      val && this.getList()
    }
  },
  mounted () {
    this.getTypeOptions()
    this.getList()
  },
  methods: {
    getTypeOptions () {
      return getMapByGroup().then(res => {
        this.modelList = res.sparePartOptions || []
      })
    },
    // 提交表单
    submit () {
      // if (_.isEmpty(this.selected)) {
      //   this.$message.warning('请选择备件')
      //   return
      // }
      this.$emit('successSubmit', this.selected)
    },
    reset () {
      this.selected = []
      this.tableData = []
      this.queryParams = {
        category: 'all',
        searchBy: null,
        keyword: null
      }
    },
    // 模糊查询
    inputSearch (item, val) {
      this.selected = []
      this.queryParams.searchBy = item.id
      this.queryParams.keyword = val
    },
    getList () {
      this.isTableLoading = true
      this.tableData = []
      const params = {
        ..._.cloneDeep(this.queryParams),
        ...this.pagination
      }
      params.orderType = this.orderType
      params.orderId = this.orderId
      getApplyOrder(params)
        .then(res => {
          this.isTableLoading = false
          const ret = res
          this.tableData = ret.list.map(v => {
            return {
              ...v,
              id: v.sparePartId,
              name: v.sparePartName,
              number: v.sparePartNumber,
              categoryName: v.sparePartCategory,
              spec: v.sparePartSpec,
              unitName: v.sparePartUnit
            }
          })
          this.pagination.rowsNumber = ret.total
        })
        .catch(err => {
          console.log(err)
          this.isTableLoading = false
        })
    },
    // 手动清空input框请求数据.
    changeVal (val) {
      if (_.isEmpty(val)) {
        this.clearSearchVal()
      }
    },
    // 清空搜索值
    clearSearchVal () {
      this.queryParams.searchBy = null
      this.queryParams.keyword = null
      this.getList()
    },
    hideDialog () {
      this.reset()
      this.$emit('hideDialog')
    }
  }
}
</script>

<style scoped lang="scss"></style>
